<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .relative-container {
      position: relative; /* 设置相对定位，作为子元素绝对定位的参照 */
      height: 100vh; /* 设置容器高度为视口高度 */
      background-color: lightgray; /* 背景颜色方便查看居中效果 */
    }

    .absolute-centered-content {
      position: absolute; /* 绝对定位 */
      top: 50%; /* 距离父容器顶部50% */
      left: 50%; /* 距离父容器左侧50% */
      transform: translate(-50%, -50%); /* 使用 transform 将元素向左上角移动50% */

      width: 400px; /* 设置内容宽度 */
      height: 200px; /* 设置内容高度 */
      text-align: center; /* 文本居中对齐 */
      font-size:18px;
      line-height:200px;
      background-color: lightblue; /* 背景颜色方便查看居中效果 */
      margin: 0 2px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
<!--多个子元素会重叠，后来者居上-->
<div class="relative-container">
  <div class="absolute-centered-content">1</div>
<!--  <div class="absolute-centered-content">2</div>-->
<!--  <div class="absolute-centered-content">3</div>-->
</div>

</body>
</html>